<template>
  <div class="default-contet" v-if="dataList.length > 0">
    <div class="title-wrap">
      <div class="title">
        <slot name="icon"></slot>
        <div class="name">
          <slot name="name"></slot>
        </div>
      </div>
    </div>
    <div class="list-wrap">
      <div class="list">
        <swiper :options="swiperObj" :class="fixedIndex && 'fixClass'">
          <div
            :class="[
              'swiper-slide',
              item.click && 'activeDIV',
              dataList.length > 3 && 'moreListPos',
            ]"
            v-for="(item, index) in dataList"
            :key="item.id"
          >
            <div class="item-wrap">
              <div
                class="item"
                @mouseenter="drawEchartsFn(item)"
                @click="clickSlideItemBigFn(index)"
                @dblclick="doubleClickGoLink(item)"
              >
                <div
                  class="pic"
                  :style="{
                    backgroundImage: `url(
              ${require('../../../assets/images/management-default-item-icon.png')}
          )`,
                  }"
                ></div>
                <div class="info">
                  <div class="name">{{ item.name }}</div>
                  <div class="desc">{{ item.desc }}</div>
                  <div class="rank">
                    <span>评价：</span>
                    <el-rate
                      v-model="item.rank"
                      disabled
                      :colors="['#FFCE05', '#FFCE05', '#FFCE05']"
                      :disabled-void-color="'#4d5352'"
                    >
                    </el-rate>
                  </div>
                  <div class="other">
                    适用业务：{{ item.info | infoArrFilter }}
                  </div>
                </div>
              </div>
              <div class="vodal-wrapper">
                <vodal :itemObj="item" />
              </div>
            </div>
          </div>
        </swiper>
        <slot name="scrollbar"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
let option = {
  // title: {
  //   text: 'Graph 简单示例',
  // },
  tooltip: {},
  animation: false,
  series: [
    {
      type: 'graph',
      layout: 'circular',
      symbolSize: 50, //设置节点圆形的大小
      label: {
        show: true, //是否在节点是默认显示内容
      },
      focusNodeAdjacency: true, //鼠标移到节点上时突出显示结点以及邻节点和边
      edgeSymbol: ['nono', 'arrow'], //设置节点2头样式arrow为箭头
      edgeSymbolSize: [4, 10], //匹配上面，设置粗细
      edgeLabel: {
        show: false, //是否显示节点到节点线上的字
        fontSize: 20,
      },
      lineStyle: {
        //设置线的颜色等
        color: '#00A0FF',
        type: 'dotted',
        opacity: 0.5,
        width: 2,
        curveness: 0.3, //设置线的曲度，0为直线，1为大弧度曲线
      },
    },
  ],
}
import vodal from '../../../components/vodal'
import 'swiper/css/swiper.css'
import { Swiper } from 'vue-awesome-swiper'
export default {
  data() {
    return {}
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    swiperObj: {
      type: Object,
      default: () => {},
    },
    fixedIndex: {
      type: Boolean,
      default: null,
    },
  },
  components: {
    vodal,
    Swiper,
  },
  methods: {
    clickSlideItemBigFn(index) {
      this.$emit('changeListItemFn', index)
    },
    doubleClickGoLink(item) {
      this.$store.commit('changeShowItemObj', item)
      this.$router.push({ name: 'integrated' })
    },
    drawEchartsFn(item) {
      // 判断是否渲染过
      let divClass = 'div' + item.id
      let dom = document.getElementById(divClass)
      let drawFlag = dom.hasAttribute('_echarts_instance_')
      if (!drawFlag) {
        option.series[0].data = item.data
        option.series[0].links = item.links
        let myChart = echarts.init(dom)
        myChart.resize() //自适应大小
        myChart.setOption(option)
      }
    },
  },
}
</script>
<style scoped lang="scss">
.default-contet {
  width: 100%;
  .title-wrap {
    width: 100%;
    height: 40px;
    background: url('../../../assets/images/management-default-list-bg.png')
      left center no-repeat;
    background-size: cover;
    .title {
      height: 40px;
      box-sizing: border-box;
      padding-left: 14px;
      display: flex;
      align-items: center;
      .icon {
        width: 24px;
        height: 24px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .name {
        font-size: 18px;
        margin-left: 8px;
        color: #fff;
      }
    }
  }
  .list-wrap {
    .list {
      width: 100%;
      margin-top: 6px;

      /deep/.swiper-container {
        width: 100%;
        height: 160px;
        overflow: initial;
        &.fixClass {
          z-index: 9;
          .swiper-wrapper {
            z-index: 8;
          }
        }
        .swiper-wrapper {
          align-items: center;
          .swiper-slide {
            width: 365px;
            height: 140px;
            &.activeDIV {
              width: 400px;
              height: 160px;
              position: relative;
              z-index: 8;
              &:hover {
                .vodal-wrapper {
                  display: block;
                }
              }
              .item-wrap {
                background: linear-gradient(
                  135deg,
                  rgba(30, 187, 216, 0.5) 0%,
                  rgba(23, 141, 251, 0.5) 100%
                );
              }
            }
            .item-wrap {
              width: 100%;
              height: 100%;
              cursor: pointer;
              border: 1px solid rgba(0, 171, 247, 0.2);
              box-sizing: border-box;
              position: relative;
              background-color: rgba(0, 116, 175, 0.2);
              .item {
                width: 100%;
                height: 100%;
                display: flex;
                box-sizing: border-box;
                align-items: center;
                .pic {
                  width: 80px;
                  height: 80px;
                  flex: 0 0 80px;
                  margin-left: 30px;
                  margin-right: 20px;
                  background-position: center;
                  background-size: cover;
                  background-repeat: no-repeat;
                }
                .info {
                  display: flex;
                  width: 220px;
                  height: 110px;
                  flex-direction: column;
                  justify-content: space-between;
                  .name {
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-size: 14px;
                    color: #2cfcfe;
                    font-weight: 600;
                    line-height: 20px;
                  }
                  .desc {
                    font-size: 12px;
                    line-height: 18px;
                    max-height: 36px;
                    opacity: 0.7;
                    color: #fff;
                    overflow: hidden;
                    width: 100%;
                  }
                  .rank {
                    color: #2cfcfe;
                    display: flex;
                    line-height: 16px;
                    /deep/.el-rate__icon {
                      margin: 0;
                      font-size: 16px;
                    }
                  }
                  .other {
                    width: 100%;
                    height: 14px;
                    line-height: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 12px;
                    color: #fff;
                  }
                }
              }
              .vodal-wrapper {
                display: none;
                position: absolute;
                width: 900px;
                height: 700px;
                cursor: default;
                background: rgba(6, 57, 83, 0.9);
                border: 2px solid #00a0ff;
                z-index: 99;
                left: 110px;
                &.rightPos {
                  right: 110px;
                }
              }
            }
            &.moreListPos:nth-last-child(-n + 2) {
              .item-wrap {
                .vodal-wrapper {
                  left: initial;
                  right: 200px;
                }
              }
            }
          }
        }
      }
      .swiper-scrollbar {
        width: 100%;
        height: 20px;
        margin-top: 6px;
        border: 1px solid rgba(0, 171, 247, 0.2);
        background: rgba(0, 116, 175, 0.2);
        border-radius: 100px;
        display: flex;
        margin-top: 6px;
        align-items: center;
        /deep/.swiper-scrollbar-drag {
          height: 10px;
          background: rgba(0, 116, 175, 0.4);
          border: 1px solid rgba(0, 171, 247, 0.4);
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
